<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运动数据</title>
</head>
<body>
    <div class="app-sportsdata">
        <header>
            <p class="iconfont icon-prev ti20 f28 pt20 cf" id="getBack"></p>
            <p class="ti20 dpflex"><span class="f20 cf fb flex1 link60">我的运动数据</span><span class="radius mr16"></span></p>
            <div class="dpflex big mt20">
                <div class="flex1 ml20">
                    <p class="c333 mb20">总运动</p>
                    <p class="cf"><span class="f28" id="allSports">99999</span>分钟</p>
                </div>
                <div class="flex1 right mr16 pl10">
                    <p class="c333 mb20" id="weepConsume">本周消耗</p>
                    <p class="cf"><span class="f28" id="consume">99999</span>千卡</p>
                </div>
            </div>
            <div class="dpflex mt30 data jcbetween cf pd30">
                <div class="consume tac">
                    <p class="c333">消耗(千卡)</p>
                    <p id="consumes" class="fb mt8">99999</p>
                </div>
                <div class="accumulated tac">
                    <p class="c333">累计(天)</p>
                    <p id="accumulated" class="fb mt8">999</p>
                </div>
                <div class="succession tac">
                    <p class="c333">连续(天)</p>
                    <p id="succession" class="fb mt8">999</p>
                </div>
            </div>
        </header>
        <main>
            <div id="bar" class="bar"></div>
            <div id="pie" class="pie"></div>
            <div id="SHbar" class="SHbar"></div>
            <div id="line" class="line"></div>
        </main>





        <!-- 引入echarts图表 -->
        <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
    </div>
</body>
</html>